<template>
	<el-dialog v-model="visible" title="消息详情" :close-on-click-modal="false">
		<el-form ref="dataFormRef" :model="dataForm"  label-width="100px" :disabled="false">
				<el-form-item label="消息id" prop="id">
					<el-input v-model="dataForm.id" ></el-input>
				</el-form-item>
	    		<el-form-item label="发送用户id" prop="sendId">
					<el-input v-model="dataForm.sendId" ></el-input>
				</el-form-item>
				<el-form-item label="发送用户名" prop="sendUserName">
					<el-input v-model="dataForm.sendUserName"></el-input>
				</el-form-item>
				<el-form-item label="接收用户id" prop="recvId">
					<el-input v-model="dataForm.recvId" ></el-input>
				</el-form-item>
				<el-form-item label="接收用户名" prop="recvUserName">
					<el-input v-model="dataForm.recvUserName"></el-input>
				</el-form-item>
				<el-form-item label="消息内容" prop="content">
					<im-message-content :message="dataForm"  :detail="true" placeholder="内容"></im-message-content>
				</el-form-item>
				<el-form-item label="消息类型" prop="type">
					<ma-dict-label dict-type="im_message_type" :dict-value="dataForm.type" />
				</el-form-item>
				<el-form-item label="消息状态" prop="status">
					<ma-dict-label dict-type="im_message_status" :dict-value="dataForm.status" />
				</el-form-item>
				<el-form-item label="发送时间" prop="sendTime">
					<el-text >{{ dataForm.sendTime }}</el-text>
				</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false" type="primary">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { usePrivateMessageApi } from '@/api/im/privateMessage'

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()

const dataForm = reactive({
	id: '',
	sendId: '',
	sendUserName: '',
	recvId: '',
	recvUserName: '',
	content: '',
	type: '',
	status: '',
	sendTime: ''})

const init = (id: number) => {
	visible.value = true
	usePrivateMessageApi(id).then(res => {
		Object.assign(dataForm, res.data)
	})
}
defineExpose({
	init
})
</script>
